<!DOCTYPE html>
<html lang="zh-cn" class="bodybg marbottom" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
<title>项目名称</title>
<link href="../style/style.css" rel="stylesheet">
<link href="../style/Common.css" rel="stylesheet">
<link href="../style/normalize.css" rel="stylesheet">
<link rel="stylesheet" href="../css/swiper.min.css">
</head>
<body>
<div style="max-width:640px; margin:0 auto;">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../img/a1.jpg" width="100%" height="100%" ></div>
				<div class="swiper-slide"><img src="../img/a2.jpg" width="100%" height="100%" ></div>
				<div class="swiper-slide"><img src="../img/a3.jpg" width="100%" height="100%" ></div>
				<div class="swiper-slide"><img src="../img/a4.jpg" width="100%" height="100%" ></div>
                <div class="swiper-slide"><img src="../img/a5.jpg" width="100%" height="100%" ></div>
			</div>

			<!-- 分页点 -->
	     <div class="swiper-pagination"></div> 

	    <!-- 左右箭头 -->
	     <!--<div class="swiper-button-prev"></div> 
	     <div class="swiper-button-next"></div> -->

	    <!-- 滚动条-->
	     <!--<div class="swiper-scrollbar"></div> -->
		</div>
	</div>
	<!-- 可以使用JQ,但是建议使用Zepto,体积小 -->
	<!-- // <script src="js/jquery-1.10.1.min.js"></script> -->
	<script type="text/javascript" src="../js/zepto.1.0.min.js"></script>
	<script src="../js/swiper.min.js"></script>
	<script>
		function fixPagesHeight() {
			$('.swiper-slide,.swiper-container').css({
				height: $(window).height(),
			})
		}
		$(window).on('resize', function() {
			fixPagesHeight();
		})
		fixPagesHeight();

		//主滑动组件
		var mySwiper = new Swiper('.swiper-container', {
			//组件滑动方向: vertical , horizontal
			direction: 'vertical',

			//是否允许鼠标滚轮滚动
			mousewheelControl: true,

			// ?
			watchSlidesProgress: true,

			// 是否循环
			 loop:true,

			// 分页点
			 pagination:'.swiper-pagination',

			// 左右箭头
	   	 //nextButton: '.swiper-button-next',
//	   	 prevButton: '.swiper-button-prev',

			// 滚动条
			 //scrollbar: '.swiper-scrollbar',

			//初始化函数
			onInit: function(swiper) {
				swiper.myactive = 0;
				console.log(swiper.activeIndex);

			},
			onProgress: function(swiper) {
				for (var i = 0; i < swiper.slides.length; i++) {
					var slide = swiper.slides[i];
					var progress = slide.progress;
					var translate, boxShadow;
					translate = progress * swiper.height * 0.8;
					scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
					boxShadowOpacity = 0;
					slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';
					if (i == swiper.myactive) {
						es = slide.style;
						es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
						es.zIndex=0;
					}else{
						es = slide.style;
						es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform ='';
						es.zIndex=1;
					}
				}
			},
			onTransitionEnd: function(swiper, speed) {
				for (var i = 0; i < swiper.slides.length; i++) {
		//	es = swiper.slides[i].style;
		//	es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = '';
		//	swiper.slides[i].style.zIndex = Math.abs(swiper.slides[i].progress);
				}
				swiper.myactive = swiper.activeIndex;
			},
			onSetTransition: function(swiper, speed) {
				for (var i = 0; i < swiper.slides.length; i++) {
				//if (i == swiper.myactive) {
					es = swiper.slides[i].style;
					es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
			//}
				}
			}
});
</script>

<!-- s=footer-->
<footer class="fn-clear"></footer>
<!-- e=footer-->
<!-- s=script --> 
<script src="../script/jquery-2.1.3.min.js"></script> 
<script src="../script/load.js"></script> 
<!-- e=script -->
</body>
</html>